<!--
 * @Description: 
 * @Author: zzj
 * @Date: 2021-10-22 09:00:45
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-29 15:22:16
-->
<template>
	<div class="product_list page_tem_1" v-loading="loading">
		<!-- 按钮 搜索表单 -->
		<div class="btns">
			<el-form size="small" inline :model="params">
				<el-form-item>
					<el-select clearable v-model="params.productCategoryId">
						<el-option :label="c.name" :value="c.id" v-for= "c in categoryData.list" :key="c.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input v-model="params.name"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button icon="el-icon-search" type="primary" @click="loadProducts">搜索</el-button>
					<el-button @click="toAddHandler">添加</el-button>
				</el-form-item>
			</el-form>
		</div>
		<!-- /按钮 搜索表单 -->

		<!-- 数据 -->
		<div class="content">
			<ul class="products">
				<li class="product" v-for="p in productData.list" :key="p.id">
					<div class="product_card">
						<div class="name">
							<span class="na" @click="toDetails(p.id)">{{p.name}}</span>
							<span class="price">{{p.price}}<span v-if="p.price > 500"> 捞币</span></span>
							<span class="status" :class="[p.status==='下架'?'a':'b']">{{p.status}}</span>	
						</div>
						<div class="description">
							{{p.description}}
						</div>
						<div class="photo">
							<img :src="p.photo" alt="" @click="toDetails(p.id)">
						</div>
					</div>
					<div class="options">
						<el-button type="primary" plain size="small" @click.stop="editHandler(p)" >修改</el-button>
						<el-button type="danger" plain size="small" @click.stop="delHandler(p)" >删除</el-button>
						<el-button v-if="p.status==='下架'" type="success" plain size="small" @click.stop="supHandler(p)" >上架</el-button>
						<el-button v-else type="warning" plain size="small" @click.stop="subHandler(p)" >下架</el-button>
					</div>
				</li>
			</ul>
		</div>
		<!-- /数据 -->

		<!-- 分页 -->
		<div class="pages">
			<el-pagination
			small
			background
			hide-on-single-page
			layout="prev, pager, next"
			@current-change="pageChangeHandler"
			:page-size="productData.pageSize"
			:current-page="productData.page"
			:total="productData.total">
		</el-pagination>
		</div>
		<!-- /分页 -->

		<!-- 抽屉 -->
		<el-drawer
			size="50%"
			:title="title"
			:visible.sync="visible"
			@closed="clearValidate('pc_form')"
			>
			<div class="drawer__content" style="padding:0 2em">
				<el-form class="drawer__container" ref="pc_form" :rules="rules" label-width="70px" :model="form">
					<el-form-item label="名称" prop="name">
						<el-input v-model="form.name" size="small"></el-input>
					</el-form-item>
					<el-form-item label="单价" prop="price">
						<el-input v-model="form.price" size="small"></el-input>
					</el-form-item>
					<el-form-item label="所属分类" prop="productCategoryId">
						<el-select clearable v-model="form.productCategoryId">
							<el-option :label="c.name" :value="c.id" v-for= "c in categoryData.list" :key="c.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="介绍" prop="description">
						<el-input type="textarea" v-model="form.description" size="small"></el-input>
					</el-form-item>
					<el-form-item label="图片">
						<el-upload
							class="avatar-uploader"
							:action="baseUrl +'/file/upload'"
							:show-file-list="false"
							list-type="picture-card"
							:on-success="handleUploadSuccess">
							<img v-if="form.photo" :src="form.photo" class="avatar">
							<i v-else class="el-icon-plus" ></i>
						</el-upload>
					</el-form-item>
					<el-form-item class="drawer__footer" style="text-align:right;margin-right:5%">
						<el-button type="primary" @click="submitHandler">提交</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-drawer>
		<!-- /抽屉 -->
	</div>
</template>

<script>
import {get,post} from "@/utils/request";
import _ from "lodash";
export default {
	data(){
		return {
			baseUrl:process.env.VUE_APP_BASE_API,   //接口基地址
			filUrl:process.env.VUE_APP_FILE_BASE_URL,   //文件上传地址
      visible: false,
			loading:false,
			title:"添加产品信息",
			params:{    //参数表单  查询
					page:1,
					pageSize:4
			}, 	 
			form:{},			//表单，保存/更新
			productData:{},
			categoryData:{},
			rules:{
				name:[{ required:true,message:"请输入分类名称",trigger:"blur" }],
				num:[{ required:true,message:"请输入分类序号",trigger:"blur" }]
			},
		}
	},
	mounted(){
		this.loadProducts();
		this.loadCategories();
	},
	methods:{
		// 跳转到详情页面
		toDetails(id){
			this.$router.push({
				path:"/base/product_details",
				query:{id}
			})
		},

		// 加载产品数据
		loadProducts(){   
			this.loading = true;
			let url = "/product/pageQuery"
			get(url,this.params).then(resp =>{
				this.productData = resp.data;
			}).finally(()=>{
				this.loading = false;
			})
		},
		// 加载栏目数据
		loadCategories(){   
			let url = "/productCategory/pageQuery"
			get(url,{page:1,pageSize:100}).then(resp =>{
					this.categoryData = resp.data;
			})
		},

		// 分页变动处理
		pageChangeHandler(page){
			this.params.page = page;
			this.loadProducts()
		},

		// 抽屉
			// 添加按钮
			toAddHandler(){
				this.form = {};
				this.title = "添加产品信息"
				this.visible = true;
			},
			// photo上传成功
			handleUploadSuccess(resp){
				if(resp.status === 200){
					let {id,groupName} = resp.data;
					// http://121.199.29.84:8888/group1/xxx.jpg
					let icon_url = this.filUrl + groupName + "/" + id;
					this.$set(this.form,"photo",icon_url)
				} else {
					this.$message({type:"error",message:resp.message})
				}
			},
			// 提交
			submitHandler(){
				this.$refs.pc_form.validate(valid =>{
					if(valid){
						let url = "/product/saveOrUpdate"
						post(url,this.form).then(resp =>{
						this.$message.success(resp.message)
						this.visible = false;
						this.loadProducts();
					})
					}
				})
			},
			// 关闭抽屉清理遗留校验结果
			clearValidate(ref){
				this.$refs[ref].clearValidate();
			},

		//修改产品分类信息
		editHandler(row){
			this.title = "修改产品信息"
			this.form = _.cloneDeep(row);
			this.visible = true;
		},
		// 删除产品分类信息
		delHandler({id}){
			// 1.询问
			this.$confirm('此操作将永久删除该行数据, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(()=>{
				// 2.删除
				let url = "/product/deleteById";
				get(url,{id}).then(resp =>{
					this.$message.success(resp.message)
					this.loadProducts();
				})
			})

			
		},
		// 产品上架
		supHandler({id}){
			let url = "/product/online"
			get(url,{id}).then(resp => {
				this.$message.success(resp.message);
				this.loadProducts();
			})

		},
		// 产品下架
		subHandler({id}){
			let url = "/product/offline"
			get(url,{id}).then(resp => {
				this.$message.success(resp.message);
				this.loadProducts();
			})
			
		},
	}
}
</script>

<style lang="scss" scoped>
.product_list {
	.content{
		.products{
			li.product{
					position: relative;
					padding: 1em 0;
					border-bottom: 1px solid lightslategray;
				.product_card{
					width: 75%;
					.name {
						font-weight: bold;
						font-size: 16px;
						.na {
							cursor: pointer;
						}
						.price {
							padding-left: 1em;
							color: rgb(243, 16, 16);
						}
						.price::before {
							content: "￥";
						}
						.status {
							padding-left: 10px;
							font-weight: lighter;
						}
						.a{
							color: grey;
						}
						.b {
							color:lightskyblue;
						}
					}
					.description {
						text-indent: 2em;
						padding: 1em 0;
						line-height: 1.6em;
						overflow: hidden;            // 溢出隐藏
						text-overflow: ellipsis;      // 溢出用省略号显示
						white-space: nowrap;         // 规定段落中的文本不进行换行

					}
					.photo {
						width: 300px;
						height: 200px;
						overflow: hidden;
						border-radius: 5px;
						img {
							cursor: pointer;
							width: 100%;
						}
					}
				}
				.options {
					position: absolute;
					right: 2em;
					top: 2em;
					padding-top: .5em
				}
			}
		}
	}
}
</style>